<template>
    <div class="login">
        <div class="login-box">
            <Card :bordered="false">
                <div slot="title">
                    <div class="login-box-hd">
                        <img class="login-box-hd-logo" src="../assets/logo-1.png" alt="">
                        <span class="login-box-hd-title">管理后台</span>
                    </div>

                </div>
                <div class="form-box">
                    <Form ref="loginForm" :model="loginForm" :rules="ruleCustom">
                        
                            <p class="form-hd-tip">请输入您的登录信息</p>
                       
                        <FormItem prop="loginname">
                            <Input v-model="loginForm.loginname" type="text" placeholder="请输入账号">
                            <span slot="prepend">
                                <Icon :size="16" type="person"></Icon>
                            </span>
                            </Input>
                            <div class="form-err"></div>
                        </FormItem>
                        <FormItem prop="passwd">
                            <Input v-model="loginForm.passwd" type="password" placeholder="请输入密码">
                            <span slot="prepend">
                                <Icon :size="16" type="locked"></Icon>
                            </span>
                            </Input>
                            <div class="form-err"></div>
                        </FormItem>
                        <!-- <FormItem prop="code">
                            <Row>
                                <Col span="14">
                                    <Input type="text" v-model="form.code" placeholder="请输入验证码">
                                    </Input>
                                </Col>
                                <Col span="8" offset="1">
                                    <div></div>
                                </Col>
                            </Row>
                        </FormItem> -->
                        <FormItem>
                            <Button :loading="btn_loading" type="primary" long @click="handleLogin('loginForm')">登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
        <div class="login-bottom">
            <img class="company-logo" src="../assets/logo-2.png" alt="">
            <p>
                Copyright© |2017杭州展鸿科技有限公司
            </p>
            <p>
                建议您使用IE9.0及以上版本/火狐/谷歌浏览器登录本站点
            </p>
        </div>
    </div>

</template>


<style lang="scss" scope>
@import "./login.scss";
#app {
  overflow-y: auto;
}
</style>


<script>
import {login} from '@/libs/post'
import Cookies from "js-cookie"
export default{
    name:'login',
    data(){
        const validateUser = (rule, value, callback) => {
            const reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{5,20}$/;
            if (value === "") {
                callback(new Error("请输入账号"));
            } else if (!reg.test(value)) {
                callback(new Error("账号格式有误"));
            } else {
                callback();
            }
        };
        const validatePass = (rule, value, callback) => {
            const reg =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/;
            if (value === "") {
                callback(new Error("请输入密码"));
            } else if (!reg.test(value)) {
                callback(new Error("密码格式有误"));
            } else {
                callback();
            }
        };
        return{
            btn_loading:false,
            loginForm:{
                loginname:'',
                passwd:''
            },      
            ruleCustom: {
                loginname: [{ validator: validateUser, trigger: "blur" }],
                passwd: [{ validator: validatePass, trigger: "blur" }]
            }
        }
    },
    beforeCreate(){
        if(!!Cookies.get('uuid')){
            this.$router.replace('/index/home');
        }
    },
    methods:{
        handleLogin(name) {

            this.$refs[name].validate(async valid => {
                if (valid&&!this.btn_loading) {
                    this.btn_loading=true;
                    let form = this.loginForm;
                    await login(form)
                        .then(res => {
                            let response=res.data;
                            if (response.code === 200) {
                                Cookies.set("uuid", response.data.uuid);
                                Cookies.set('authoritydata',response.data.authoritydata);
                                let btnPower=response.data.authority.map(item=>{
                                    return item.description
                                });
                               
                                this.$store.commit("setbtnPower", btnPower);
                                this.$store.commit("setOwnInfo", response.data);
                                this.$router.replace('/index/home');
                            } else {
                                this.$Notice.error({
                                    title: '登录失败',
                                    desc: response.msg
                                });
                                this.btn_loading=false;
                            }
                        })
                        .catch(err => {
                            this.btn_loading=false;
                            this.$Notice.error({
                                title: '请求出错'
                            });
                        });
                }
            });
        }
    }
}

</script>
